La syntaxe évolutive du @Font-Face

Notes de travail, bref aperçu de l’évolution de la formule magique pour intégrer des polices web (via l’attribut CSS @font-face) dans un maximum de navigateurs sans provoquer de bugs…

Chronologie

mars 2008: Safari 3.1 supporte @font-face

31 octobre 2008: Jon Tan présente une technique CSS pour appliquer @font-face dans IE et Safari.

juin 2009: Firefox 3.5 supporte @font-face
septembre 2009: Opera 10 supporte @font-face

4 septembre 2009: Paul Irish (employé chez Google Chrome) propose une “Bulletproof syntax“.

15 septembre 2009: Richard Fink (ReadableWeb.com) propose une syntaxe “Mo’ Bulletproofer” (qui résout un bug propre à Internet Explorer 6-8, mais nécessite une double déclaration peu élégante).

janvier 2010: Google Chrome 4.0 supporte @font-face. Le support de cette propriété CSS2 est désormais effectif sur l’ensemble des navigateurs courants. En quelques mois, l’intégration de polices est devenue une réalité tangible pour les graphistes du web.

février 2010: Paul Irish améliore la syntaxe “Bulletproof” avec une nouvelle astuce: une fonte locale inexistante (représentée par un smiley) contourne les bugs de IE 6-8.

mai 2010: Google lance le “Google Font API” et “Google Font Directory“, permettant d’inclure des fontes sous licence libre hébergées sur les serveurs de Google.

août 2010: Paul Irish découvre un bug sous Android, lié à la déclaration de la fonte locale, qui invalide la “Bulletproof syntax”. On revient donc à la “Mo’ Bulletproofer syntax”.

3 février 2011: Ethan Dunham (Fontspring et Fontsquirrel) propose “The New Bulletproof Syntax“. Solution élégante pour le bug IE: un point d’interrogation placé à la fin de l’URL de la police destinée à IE suffit à le contrer.

la solution actuelle

21 février 2011: dans “Further Hardening of the Bulletproof Syntax“, Ethan Dunham relève un problème avec IE9 (uniquement si ce dernier est en “compatibility mode”), et après consultation auprès de Microsoft propose une nouvelle version améliorée :

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot'); /* IE9 Compat Modes */
	src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
	     url('myfont-webfont.woff') format('woff'), /* Modern Browsers */
	     url('myfont-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

Références

• Support @font-face par les navigateurs: http://caniuse.com/#feat=fontface
• Håkon Wium Lie: CSS @ Ten: The Next Big Thing, A List Apart, August 2007
• Jeffrey Zeldman: Web Fonts and Standards, August 2009
• Richard Fink: Web Fonts at the Crossing, A List Apart, June 2010

Technique:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Quelques sources de polices:
http://www.fontsquirrel.com/: fontes sous licence libre
http://www.google.com/webfonts: fontes sous licence libre
http://www.fontspring.com/: fontes commerciales, achat unique
http://typekit.com/: fontes commerciales, souscription annuelle (forfait dès $25)
http://fontdeck.com/: fontes commerciales, souscription annuelle (par fonte, env $7.50)